<script setup lang="jsx">
import { nextTick, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import useResetTableRef from '@/hooks/common/resetTableRef';
import { getBasicInformation } from '@/service/api/modules/trace/one-code-trace';
import BasicInformation from './modules/basic-information.vue';
import MaterielInfo from './modules/materiel-info.vue';
import QualityInformation from './modules/quality-information.vue';
import PackageInfo from './modules/package-info.vue';
import TechnologyInfo from './modules/technology-info.vue';
import PcsInfo from './modules/pcs-info.vue';
import PnlInfo from './modules/pnl-info.vue';
import FourInspectionSites from './modules/four-inspection-sites.vue';
import IntoStash from './modules/into-stash.vue';
import ProductionInformation from './modules/production-information.vue';
import DeviceAlarmInfo from './modules/device-alarm-info.vue';

const [searchParams, resetSearchParams] = useResetTableRef({
  code: null
});

const formList = [
  {
    label: '追溯码',
    key: 'code',
    type: 'input',
    span: 4,
    placeholder: '请输入追溯码'
  }
];

// 基本信息相关
const [basicInfo, resetBasicInfo] = useResetTableRef({
  custName: null,
  custNo: null,
  custProdNo: null,
  custab: null,
  lotId: null,
  moduleNo: null,
  orderNo: null,
  petype: null,
  pnlId: null,
  prodOrderNo: null
});

// 切换tab
const activeKey = ref('materiel');
const headerRef = ref(null);
const basicInfoRef = ref(null);
const materielInfoRef = ref(null);
const qualityInfoRef = ref(null);
const productionInformationRef = ref(null);
const pcsInfoRef = ref(null);
const packageInfoRef = ref(null);
const pnlInfoRef = ref(null);
const intoStashRef = ref(null);
const technologyInfoRef = ref(null);
const fourInspectionSitesRef = ref(null);
const deviceAlarmInfoRef = ref(null);
const { height } = useElementSize(headerRef);

const basicInfoOk = ref(false);
function search() {
  if (!searchParams.value.code) {
    window.$message.error('追溯码不能为空!');
    return;
  }
  getBasicInformation({ pnlId: searchParams.value.code }).then(({ error, data }) => {
    if (!error) {
      basicInfo.value = data;
      // materielInfoRef.value.getData(basicInfo.value.lotId);
      // 检测当前为第几个tab，然后进行获取数据
      basicInfoOk.value = true;
      // handleTabChange(activeKey.value);
      if (data.lotId) {
        getAllTabData();
      }
    }
  });
}
function reset() {
  basicInfoOk.value = false;
  resetBasicInfo();
  resetSearchParams();
  materielInfoRef.value?.reset();
  qualityInfoRef.value?.reset();
  productionInformationRef.value?.reset();
  fourInspectionSitesRef.value?.reset();
  packageInfoRef.value?.reset();
  pcsInfoRef.value?.reset();
  pnlInfoRef.value?.reset();
  intoStashRef.value?.reset();
  technologyInfoRef.value?.reset();
  deviceAlarmInfoRef.value?.reset();
}

function getAllTabData() {
  nextTick(() => {
    // 物料信息
    materielInfoRef.value.getData(basicInfo.value.lotId);
    // IQPC检验信息
    qualityInfoRef.value.getData({
      lotId: basicInfo.value.lotId,
      moduleNo: basicInfo.value.moduleNo
    });
    // 生产信息
    productionInformationRef.value.setCurrentLotId(basicInfo.value.lotId);
    productionInformationRef.value.getProcessList();
    productionInformationRef.value.getTechniqueListData();
    // 工艺信息
    technologyInfoRef.value.setCurrentPnlId(searchParams.value.code);
    technologyInfoRef.value.getData(basicInfo.value.lotId);
    // 报警信息
    deviceAlarmInfoRef.value.setCurrentPnlId(searchParams.value.code);
    deviceAlarmInfoRef.value.getData();

    // PNL清单信息
    pnlInfoRef.value.setCurrentPnlId(searchParams.value.code);
    pnlInfoRef.value.getData();
    // PCS/SET信息
    pcsInfoRef.value.setCurrentPnlId(searchParams.value.code);
    pcsInfoRef.value.getData(basicInfo.value.lotId);
    // 入库信息
    intoStashRef.value.setSearchParams({
      prodNo: basicInfo.value.moduleNo,
      lotNo: basicInfo.value.lotId
    });
    intoStashRef.value.getData();
    // 出货信息
    packageInfoRef.value.setCurrentLotId(basicInfo.value.lotId);
    packageInfoRef.value.getData();
    // 四大检验站点
    fourInspectionSitesRef.value.getData();
  });
}

function handleTabChange(key) {
  if (!basicInfoOk.value) return;
  switch (key) {
    case 'materiel':
      nextTick(() => {
        materielInfoRef.value.getData(basicInfo.value.lotId);
      });
      break;
    case 'quality':
      nextTick(() => {
        qualityInfoRef.value.getData({
          lotId: basicInfo.value.lotId,
          moduleNo: basicInfo.value.moduleNo
        });
      });
      break;
    case 'productionInformation':
      nextTick(() => {
        productionInformationRef.value.setCurrentLotId(basicInfo.value.lotId);
        productionInformationRef.value.getProcessList();
        productionInformationRef.value.getTechniqueListData();
        // productionInformationRef.value.getData(basicInfo.value.lotId);
      });
      break;

    case 'technologyInfo':
      nextTick(() => {
        technologyInfoRef.value.setCurrentPnlId(searchParams.value.code);
        technologyInfoRef.value.getData(basicInfo.value.lotId);
      });
      break;
    case 'pnl':
      nextTick(() => {
        pnlInfoRef.value.setCurrentPnlId(searchParams.value.code);
        pnlInfoRef.value.getData();
      });
      break;
    case 'pcs':
      nextTick(() => {
        pcsInfoRef.value.setCurrentPnlId(searchParams.value.code);
        pcsInfoRef.value.getData(basicInfo.value.lotId);
      });
      break;

    case 'intoStash':
      nextTick(() => {
        // intoStashRef.value.setCurrentLotId(basicInfo.value.lotId);
        // intoStashRef.value.getData();
      });
      break;

    case 'package':
      nextTick(() => {
        packageInfoRef.value.setCurrentLotId(basicInfo.value.lotId);
        packageInfoRef.value.getData();
      });
      break;
    case 'fourInspectionSites':
      nextTick(() => {
        fourInspectionSitesRef.value.getData();
      });
      break;
    default:
      break;
  }
}
</script>

<template>
  <div class="one-code-trace-page h-full">
    <!--    查询区域-->

    <div ref="headerRef">
      <CommonSearch
        v-model:search-params="searchParams"
        :form-list="formList"
        @search="search"
        @reset="reset"
      ></CommonSearch>
      <BasicInformation ref="basicInfoRef" v-model:basicInfo="basicInfo"></BasicInformation>
    </div>
    <div class="content" :style="{ height: `calc(100% - ${height}px)` }">
      <!-- @change="handleTabChange" -->
      <ATabs v-model:activeKey="activeKey" type="card" class="my-tabs h-full">
        <ATabPane key="materiel" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-zuantaiyizuanweiwuliaoliebiao"></span>
              物料信息
            </span>
          </template>
          <MaterielInfo ref="materielInfoRef"></MaterielInfo>
        </ATabPane>
        <ATabPane key="quality" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-pinzhixinxi"></span>
              IPQC检验信息
            </span>
          </template>
          <QualityInformation ref="qualityInfoRef" />
        </ATabPane>
        <!-- IPQC检验信息  四大检验站点 设备报警信息 入库信息-->
        <ATabPane key="productionInformation" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-shejishengchanxinxi"></span>
              生产信息
            </span>
          </template>
          <ProductionInformation ref="productionInformationRef" />
        </ATabPane>

        <ATabPane key="technologyInfo" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-gongyixinxi"></span>
              工艺信息
            </span>
          </template>
          <TechnologyInfo ref="technologyInfoRef" />
        </ATabPane>

        <ATabPane key="deviceAlarmInfo" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-shebeibaojing"></span>
              设备报警信息
            </span>
          </template>
          <DeviceAlarmInfo ref="deviceAlarmInfoRef" />
        </ATabPane>

        <ATabPane key="pnl" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-chanpinpici"></span>
              PNL清单信息
            </span>
          </template>
          <PnlInfo ref="pnlInfoRef" />
        </ATabPane>
        <ATabPane key="pcs" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-ps"></span>
              PCS/SET信息
            </span>
          </template>
          <PcsInfo ref="pcsInfoRef" />
        </ATabPane>

        <ATabPane key="fourInspectionSites" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-sidajianyanzhandian"></span>
              四大检验站点
            </span>
          </template>
          <FourInspectionSites ref="fourInspectionSitesRef" v-model:prodNo="basicInfo.moduleNo" />
        </ATabPane>

        <ATabPane key="intoStash" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-rukuxinxi"></span>
              入库信息
            </span>
          </template>
          <IntoStash ref="intoStashRef" />
        </ATabPane>

        <ATabPane key="package" force-render>
          <template #tab>
            <span>
              <span class="iconfont icon-baozhuangshengchanjilubiao"></span>
              出货信息
            </span>
          </template>
          <PackageInfo ref="packageInfoRef" />
        </ATabPane>
      </ATabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.one-code-trace-page {
  .content {
    background: #fff;
    padding: 5px 15px;
    :deep(.ant-tabs) {
      .ant-tabs-nav {
        margin-bottom: 0;
      }

      .ant-tabs-content-holder {
        height: calc(100% - 40px);
        .ant-tabs-content {
          height: 100%;
          .ant-tabs-tabpane {
            height: 100%;
          }
        }
      }
      .ant-tabs-nav-list {
        .ant-tabs-tab {
          border-radius: 6px 6px 0 0;
        }
        .ant-tabs-tab-active {
          background: #646cff;
          .ant-tabs-tab-btn {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
